<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="css/audio.css">
		<link rel="stylesheet" href="css/video-js.min.css">
		<link rel="stylesheet" href="css/swiper.min.css">
		<title></title>
	</head>
	<style>
		html {
			width: 100%;
			height: 100%;
			font-family: "微软雅黑";
		}
		/*div {
			border: 1px solid black;
		}*/
		
		pre {
			white-space: pre-wrap;
			font-size: 1.3em;
			line-height: 1.5em;
			color: #666666;
		}
		
		.top {
			height: 10vh;
			font-size: 1.4em;
			font-weight: bold;
			display: flex;
			flex-wrap: wrap;
			align-content: center;
			text-indent: 1em;
		}
		.top p{
			width: 100%;
		}
		.video {
			position: relative;
			height: 34vh;
			width: 90vw;
			padding: 0 5vw;
			overflow: hidden;
		}
		
		.mp3 {
			/*height: 10vh;
			padding: 5vw;*/
			height: 6vh;
			padding: 5vw;
		}
		
		.content {
			width: 90vw;
			padding: 0 5vw;
		}
		
		.zy_controls {
			display: none;
		}
		
		.swiper-container {
			height: 100%;
			width: 100%;
		}
		
		.swiper-slide {
			height: auto;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
	</style>

	<body>
		<div class="top">
			<p>湖州科技馆—宇宙探究展区</p>
			<p style="font-size: 0.5em;">2019-04-03</p>
		</div>
		<div class="video">
			<div class="playvideo" style="height: 100%;">
				<div class="zy_media" style="height: 100%;">
					<video id="my-video" class="video-js" controls preload="auto" poster="img/timg.png" data-setup="{}" style="width: 100%;height: 100%;">
						<source src="mv/变形金刚3 预告片.mp4" type="video/mp4">
						<p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that
						</p>
					</video>

				</div>
			</div>
		</div>
		<div class="mp3">
			<img src="img/log.png" style="height: 100%;float: left;margin-right: 1em;" />
			<p class="weixinAudio">
				<audio src="" id="media" width="1" height="1" preload></audio>
				<span id="audio_area" class="db audio_area">
	<span class="audio_wrp db">
	<span class="audio_play_area">
		<i class="icon_audio_default"></i>
		<i class="icon_audio_playing"></i>
	</span>
				<span id="audio_length" class="audio_length tips_global" style="display: none;"></span>
				<span class="db audio_info_area">
				</span>
				<span id="audio_progress" class="progress_bar" style="width: 0%;display: none;"></span>
				</span>
				</span>
			</p>
		</div>
		<div class="content">
			<pre>   湖州市科技馆是以提高公众科学文化素质为目的，面向社会公众开展科普展览、科技培训、青少年科技创新竞赛等活动的科普宣传教育机构，是实施“科教兴市”战略的重要基础设施，是传播科学的殿堂，启迪创新的摇篮，展示科技的窗口，交流科技的园地，是湖州市科普事业的重要组成部分。
　　湖州市科技馆是一所现代化综合性中型科技馆，总建筑面积8974平方米，布展面积6622平方米，围绕“科技与人类”这一主线设置了 “高新技术”主题区</pre>
			<img src="img/1303201544348354115.png" width="100%" />
		</div>

	</body>
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/weixinAudio.js" type="text/javascript"></script>
	<script src="js/video.min.js" type="text/javascript"></script>
	<script src="js/swiper.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		var myPlayer = videojs('my-video');
		videojs("my-video").ready(function() {
			var myPlayer = this;
			myPlayer.play();
		});
		$('.weixinAudio').weixinAudio({
			autoplay: false,
			src: 'sound/sound.mp3',
		});

		var swiper = new Swiper('.swiper-container', {
			direction: 'vertical',
			slidesPerView: 'auto',
			freeMode: true,
			scrollbar: {
				el: '.swiper-scrollbar',
			},
			mousewheel: true,
			observer: true, //修改swiper自己或子元素时，自动初始化swiper
			observeParents: true, //修改swiper的父元素时，自动初始化swiper
		});
	</script>

</html>